<template>
	<!-- 艺人-艺人管理 -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="'overflow:'+(pagemetaShow?'hidden':'visible')"></page-meta>
	<!-- #endif -->
	<view class="artistManage">

		<view class="query">
			<!-- 城市选择 -->
			<view class="query-citySelect">
				<CitySelect @submit="citySelectSubmit"></CitySelect>
			</view>

			<!-- 查询 -->
			<view class="query-input">
				<u-search v-model="queryData" placeholder="搜索艺人名称" bgColor="#fff" height="56rpx" searchIconSize="28rpx"
					:showAction="false" @change="queryChange"></u-search>
			</view>

		</view>

		<!-- 展示 -->
		<view class="list">
			<ListItem class="item" v-for="(res,index) in listData" :key="index" :data="res" @init="init" @setPagemetaShow="setPagemetaShow" ></ListItem>

			<uni-load-more v-if="listData.length > 0" :status="loadingType"></uni-load-more>

			<noData v-if="listData.length<1"></noData>
		</view>

	</view>

</template>

<script>
	// 公共方法
	import {
		debounce,
		ceshi
	} from '@/utils/index.js'

	//页面组件
	import ListItem from './components/listItem.vue'
	import CitySelect from './components/citySelect.vue'

	//请求api
	import {
		postArtistListApi, // 艺人管理列表
	} from '@/api/artistCentre.js'

	export default {
		components: {
			ListItem,
			CitySelect
		},
		data() {
			return {
				//搜索框的值
				queryData: '',

				listData: [], // 订单列表
				current: 1, // 当前页


				show: false,

				loadingType: 'loading', // 是否显示更多

				cityCode: '', // 城市代码
				pagemetaShow: false, // 是否穿透
			};
		},
		onShow() {
			// 有城市数据后才执行
			if (this.cityCode !== "") {
				this.init()
			}
			

		},
		//滑动到底部
		onReachBottom() {
			this.current++

			this.queryList()
		},
		methods: {
			/**
			 * 搜索框变化
			 */
			queryChange(val) {
				this.init()
			},

			/**
			 * 城市改变
			 */
			citySelectSubmit(val) {
				this.cityCode = val
				this.init()
			},

			/**
			 * 初始化
			 */
			init() {
				// 当前页恢复0
				this.current = 1

				// 数据容器清空
				this.listData = []

				// loading状态
				this.loadingType = 'loading'

				//查询艺人管理列表数据
				this.queryList()

			},

			/**
			 * 查询艺人管理列表数据
			 */
			queryList() {
				let params = {
					pageNum: this.current, // 当前页
					pageSize: 10, // 一页几条
				}
				if (this.queryData !== '') {
					params['stageName'] = this.queryData
				}
				if (this.cityCode !== '') {
					params['cityCode'] = this.cityCode
				}

				this.postArtistList(params)

			},


			/**
			 * 请求艺人管理列表
			 */
			async postArtistList(params) {

				// 处理中
				uni.showLoading({
					title: '正在处理中'
				});

				const res = await postArtistListApi(params);

				// 关闭处理中
				uni.hideLoading();


				// 报错提示
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: res.msg,
						icon: 'none'
					})
				}

				if (res.rows.length < 10) {
					this.loadingType = 'noMore'
				}

				// 订单列表赋值
				this.listData.push(...res.rows)

			},
			
			/**
			 * 修改穿透
			 */
			setPagemetaShow(e){
				this.pagemetaShow = e.show
				
			}
		}
	}
</script>


<style>
	page {
		height: 100%;
	}
</style>
<style lang="less" scoped>
	.artistManage {
		height: auto;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0) 100%);

		#padding(34rpx 24rpx 36rpx 24rpx);

		.list {
			margin-top: 32rpx;

			// .item {
			// 	margin-bottom: 24rpx;
			// }

			/deep/ .no-data-box {
				&::after {
					height: 0;
				}
			}
		}

		.query {
			#flex(-, space-between, center);

			.query-citySelect {
				height: 60rpx;
			}

			.query-input {
				width: 82%;
			}
		}
	}
</style>